import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { FlatList, TouchableOpacity, Image, View, Text } from 'react-native'
import Button from './Button'
import styles from './Styles/CommodityListStyle'

export default class CommodityList extends Component {
  // Prop type warnings
  static propTypes = {
    style: PropTypes.object,
    navigation: PropTypes.object,
    data: PropTypes.array,
  }

  // Defaults for props
  static defaultProps = {
    data: null
  }

  render () {
    if (!this.props.data || this.props.data == '') {
      return (
        <View style={styles.emptySection}>
          <Text>项目为空</Text>
        </View>
      )
    }
    const { navigate } = this.props.navigation
    return (
      <FlatList
        data={this.props.data}
        keyExtractor={(item,index)=>index}
        renderItem={({item,index}) =>
          <View style={styles.item} key={index}>
            <TouchableOpacity
              style={styles.left}
              onPress={()=>navigate('CommodityDetailScreen',
                {id:item.id})}>
              <Image style={styles.image}
                source={{uri:item.img}} />
              <View style={styles.main}>
                <Text style={styles.title}>{item.name}</Text>
                <Text style={styles.span}>销量: {item.count}</Text>
                <Text style={styles.span}>{item.star && '['+item.star+']'} {item.type && '['+item.type+']'}</Text>
              </View>
            </TouchableOpacity>
            <View style={styles.right}>
              <Text style={styles.price}>{item.price}元</Text>
              <Text>{item.clock}分钟</Text>
              <Button title='叫服务' medium
                onPress={()=>navigate('CallScreen',{id:item.id})} />
            </View>
          </View>
        }
      />
    )
  }
}
